/**
* @file cascaderDepartmentList.vue
* @author huang
* @date 2023/8/15
* @description 级联部门列表
* @projectName
* @email newflyhuang@gmail.com
*/

<template>
  <el-cascader
    ref="cascader"
    v-model="targetValue"
    :options="list"
    :props="{value: 'deptId', label: 'deptName', children: 'children',hasChildren: 'hasChildren',checkStrictly:true,emitPath:false}"
    class="w-100"
    filterable
    v-bind="$attrs"
    @change="onChange"
  />
</template>

<script>
import SystemDepartmentManagementApi from '../api';
import { convertToTree, } from '@/common/utils/convert';

export default {
  props: {
    value: {
      type: [
        Number,
        String,
      ],
      default: 0,
    },

  },
  data() {
    return {
      parentList: [],
    };
  },
  computed: {
    targetValue: {
      set(val) {
        console.log(val, 'val');

        this.$emit('input', val);
        this.$emit('change', this.$refs.cascader.getCheckedNodes());
      },
      get() {
        return this.value;
      },
    },
    list() {
      const arr = this.parentList.map((item) => {
        if (item?.children.length) {
          return item;
        }
        this.$delete(item, 'children',);
        return item;
      });
      return convertToTree(arr);
    },
  },
  created() {
    this.initParentDepartmentList();
  },
  methods: {
    // 初始化上级部门列表
    async initParentDepartmentList() {
      const rs = await SystemDepartmentManagementApi.getDepartmentList();
      console.log(rs);
      this.parentList = rs;
    },
    // 选择上级部门
    onChange(event) {
      // console.log(event, 'event');
    },
  },

};
</script>

<style lang="scss" scoped>

</style>
